$body-bg: #ebecee;
$waterfall-item-width: 400px;
$aside-width: 320px;
$profile-bg-height: 150px;
$profile-avatar-size: 100px;
$container-min-width: 960px;
$container-max-width: 1300px;
$article-min-width: 1000px;
$toc-width: 320px;
$toc-item-height: 25px;
$footer-height: 225px;
body {
  background: $body-bg;
  font-family: "Roboto", Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3",
    Source Han Sans CN Regular, WenQuanYi Micro Hei, "Microsoft YaHei", Arial,
    sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility;
}

a.unstyled {
  color: inherit;
  &:hover,
  &:active {
    color: inherit;
  }
}

.nowrap {
  vertical-align: middle;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
// change 
@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

@import "materialize/index";
@import "svgIcon";
@import "layout";
@import "search";
@import "taxonomy";
@import "typo";
@import "toc";
@import "breadcrumb";
@import "post";
@import "splash";
@import "archive";


.no-toc {
  max-width: $container-max-width - $toc-width;
  margin-left: auto;
  margin-right: auto;
}

.reveal {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity .5s cubic-bezier(0.6, 0.2, 0.1, 1) ,transform .5s cubic-bezier(0.6, 0.2, 0.1, 1) ;
  &.enter{
    transform: translateY(0);
    opacity: 1;
  }
}


.waterfall {
  columns: $waterfall-item-width;
  column-gap: 0;
  margin: $gutter-width/-2;
  &__item {
    padding: $gutter-width/2;
    page-break-inside: avoid;
    break-inside: avoid-column;
  }
}

.pagination {
  margin: 2 * $gutter-width 0;
}
//single pagination
.pagination-single {
  height: $navbar-height-mobile;
  line-height: $navbar-line-height-mobile;
  @media #{$medium-and-up} {
    height: $navbar-height;
    line-height: $navbar-line-height;
  }
  padding: 0 $gutter-width;
  background-color: $nav-bg-color;

  .pagination-item {
    width: 50%;
    padding-right: $gutter-width/2;
    float:left;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    &.next {
      justify-content: flex-end;
      padding-right: 0;
      padding-left: $gutter-width/2;
      float: right;
      text-align:right;
    }
    i {
      color: $secondary-color;
      flex:none;
    }
    a{
      @extend .nowrap;
      flex: 1 2 auto;
    }
  }
}

.btn.btn-secondary {
  line-height: 30px;
  height: 30px;
  padding: 0 1rem;
  box-shadow: none;
  background-color: $hint-color;
  &:hover {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12),
      0 3px 1px -1px rgba(0, 0, 0, 0.2);
    background-color: $secondary-color;
  }
}

#js-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 995;
  cursor: pointer;
  display: none;
}

.collection {
  flex-flow: row wrap;
  background: #fff;
  columns: 400px;
  padding: 12px 24px;
  .collection-item {
    display: block;
    break-inside: avoid;
    padding: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: $off-black;
    transition: all 0.2s;
    &:hover {
      background: #f7f7f7;
    }
  }
}
